<template>
  <section class="m-istyle">
    <dl @mouseover="mouseover">
      <dt>有格调</dt>
      <dd :class="{active:kind==='all'}" kind="all" keyword="景点">全部</dd>
      <dd :class="{active:kind==='part'}" kind="part" keyword="美食">约会聚餐</dd>
      <dd :class="{active:kind==='spa'}" kind="spa" keyword="丽人">丽人SPA</dd>
      <dd :class="{active:kind==='movie'}" kind="movie" keyword="电影">电影演出</dd>
      <dd :class="{active:kind==='travel'}" kind="travel" keyword="旅游">品质出游</dd>
    </dl>



    <ul class="ibody" v-custom>
      <li v-for="item in list_cur" :key="item.title">
        <el-card :body-style="{ padding: '0px' }" shadow="never">
          <img :src="item.img" class="image">

          <ul class="cbody">
            <li class="title">{{ item.title }}</li>
            <li class="pos">
              <span>{{ item.pos }}</span>
            </li>
            <li class="price">
              ￥
              <em>{{ item.price }}</em>
              <span>/起</span>
            </li>
          </ul>
        </el-card>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data: () => {
    return {
      loading: true,
      kind: 'all',
      list: {
        all: [],
        part: [],
        spa: [],
        movie: [],
        travel: []
      }
    }
  },

  created() {
    this.selectTab("景点",this.$store.state.geo.position.city)
  },

  methods: {
    mouseover: async function(e) {
      // let dom =  e.currentTarget
      let dom = e.target
      if (dom.tagName.toLowerCase() === 'dd') {
        this.kind = dom.getAttribute('kind') //改变所在Tab栏的位置
        let keyword = dom.getAttribute('keyword')
        this.selectTab(keyword,this.$store.state.geo.position.city)
      }
    },

    
    async selectTab(keyword,city) {
      let self = this
      let {
        status,
        data: { count, pois }
      } = await self.$axios.get('/search/resultsByKeywords', {
        params: {
          keyword:keyword,
          city: city
        }
      })
      if (status === 200 && count > 0) {
        let r = pois.filter(item => item.photos.length).map(item => {
          return {
            title: item.name,
            pos: item.type.split(';')[0],
            price: item.biz_ext.cost || '暂无',
            img: item.photos[0].url,
            url: '//abc.com'
          }
        })
        self.list[self.kind] = r.slice(0, 9)
      } else {
        self.list[self.kind] = []
      }
    }
  },

  computed: {
    list_cur: function() {
      return this.list[this.kind]
    }
  },
  directives:{
    custom:{
      componentUpdated:function(el){
        el.style.height = el.offsetHeight+"px"  //固定高度
    }
  }}
}
</script>

<style lang="scss">
@import '@/assets/css/index/artistic.scss';
</style>
